<template>
  <div class="login-page">
    <div class="login-container">
      <!-- 应用图标 -->
      <div class="app-icon">
        <van-image
          round
          width="80"
          height="80"
        />
      </div>
      <!-- 应用名称 -->
      <h1 class="app-title">考试系统</h1>
      <!-- 用户名输入框 -->
      <van-field
        v-model="username"
        label=""
        placeholder="请输入用户名"
        class="login-field"
      />
      <!-- 密码输入框 -->
      <van-field
        v-model="password"
        type="password"
        label=""
        placeholder="请输入密码"
        class="login-field"
      />
      <!-- 登录按钮 -->
      <van-button
        type="primary"
        block
        class="login-btn"
        @click="handleLogin"
      >
        登录
      </van-button>
      <!-- 注册引导 -->
      <div class="register-link">
        还没有账号？<router-link to="/register">立即注册</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

const router = useRouter();
const username = ref('student001'); // 初始值设为示例内容
const password = ref('********'); // 初始值设为示例内容，实际开发可根据需求调整

const handleLogin = () => {
  // 这里简单模拟登录逻辑，实际需调用接口与后端交互校验
  if (username.value && password.value) {
    // 假设校验通过，跳转到首页或其他页面，可根据实际路由调整
    router.push('/'); 
    showToast('登录成功');
  } else {
    showToast('请输入完整的用户名和密码');
  }
};
</script>

<style scoped>
.login-page {
  background: linear-gradient(180deg, #837aff 0%, #b3a8f9 100%);
  min-height: 100vh;
  padding-top: 20px;
  box-sizing: border-box;
}

/* 模拟手机状态栏，仅用于页面视觉效果，实际手机系统会自带 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  color: #fff;
  font-size: 14px;
}

.login-container {
  width: 85%;
  margin: 30px auto 0;
  text-align: center;
}

.app-icon {
  margin-bottom: 15px;
}

.app-title {
  font-size: 20px;
  color: #fff;
  margin-bottom: 30px;
}

.login-field {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
}

.login-btn {
  border-radius: 8px;
}

.register-link {
  margin-top: 15px;
  color: #fff;
  font-size: 14px;
}

.register-link a {
  color: #fff;
  text-decoration: underline;
}
</style>